<template>
    <div>
        <Header @Like="Like" :likeShow="true" :isLike="isLike"></Header>
        <div class="detail">
            <h1>{{ articleDetail.title }}</h1>
            <div class="info">
                <div class="infoItem ">
                    <i class="iconfont menuIcon icon-shijian"></i>
                    <span class="num">{{ articleDetail.createTime }}</span>
                </div>
                <div class="infoItem">
                    <i class="iconfont menuIcon icon-zimu"></i>
                    <span class="num">{{ articleDetail.wordsNum }}</span>
                </div>
                <div class="infoItem">
                    <i class="iconfont menuIcon icon-guankan"></i>
                    <span class="num">{{ articleDetail.read }}</span>
                </div>
                <div class="infoItem">
                    <i class="iconfont menuIcon icon-pinglun"></i>
                    <span class="num">{{ articleDetail.discuss }}</span>
                </div>
                <div class="infoItem ">
                    <i class="iconfont menuIcon icon-xihuan"></i>
                    <span class="num">{{ articleDetail.like }}</span>
                </div>
                <div class="infoItem ">
                    <i class="iconfont menuIcon icon-lishuyu"></i>
                    <span class="num">{{ articleDetail.articleType.typeName }}</span>
                </div>
            </div>
            <div class="content" v-html="articleDetail.content"></div>
            <Comment></Comment>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import Header from '../components/header.vue'
import { getArticle, getLike } from '../plugin/request'
import Comment from '../components/comment.vue'
export default {
  components: { Header, Comment },
    setup() {
        const route = useRoute()
        const state = reactive({
            id: '',
            articleDetail: {
                articleType: {
                    typeName: ''
                }
            },
            isLike: false
        })
        onMounted(() => {
            state.id = route.params.id
            state.isLike = localStorage.getItem('like'+state.id) ? true : false
            article()
        })
        const article = async () => {
            let { data } = await getArticle(state.id)
            if(data.status == 1) state.articleDetail = data.data
        }
        const Like = async () => {
            console.log(state.articleDetail.id);
            if(state.isLike) {
                alert('不可取消点赞')
            }else{
                let params = {
                    id: state.articleDetail.id
                }
                let { data } = await getLike(params)
                if(data.status == 1) {
                    localStorage.setItem('like'+state.articleDetail.id, true)
                    state.isLike = true
                    state.articleDetail.like ++
                }
                console.log(data)
            }
        }
        return {
            ...toRefs(state),
            Like
        }
    }
}
</script>

<style scoped lang="scss">
.detail{
    width: 800px;
    margin: 0 auto;
    padding-top: 100px;
    .info{
        display: flex;
        flex-wrap: wrap;
        .infoItem{
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-right: 20px;
            color: #666;
            .menuIcon{
                cursor: pointer;
                margin-right: 2px;
            }
        }
    }
}
@media screen and (max-width: 768px){
    .detail{
        width: 90%;
    }
}
</style>